import React, { Component } from "react";
import './index.css'

export default class Item extends Component {

    state = {
        display: "none"
    }

    deleteItem = ( id, todo ) => {
        return () => {
            if( window.confirm(`是否删除${todo}`) ){
                this.props.deleteTodoItem( id )
            }
        }
    }

    render() {
        const { id , todo, done } = this.props
        return (
            <div onMouseOver={ () => this.setState( {display: "block"} )  }  onMouseOut={ () => this.setState( {display: "none"} ) }>
                <li>
                    <label>
                        <input type="checkbox" checked={ done } onChange={ event => {
                            this.props.checkedStateChange( id, !done )
                        } }/>
                        <span>{ todo }</span>
                    </label>
                    <button className="btn btn-danger" onClick={ this.deleteItem( id, todo ) } style={{ display: this.state.display }}>
                        删除
                    </button>
                </li>
            </div>
        );
    }
}
